<template>
    <div style="height:100%;width:100%;">
        <div class="retrieval">
            <div class="retrieval-title youba-primary-grey">请设置您的新密码</div>
            <div class="retrieval-group">
                <group>
                    <mu-input class="retrieval-input" v-model="newpass" label="请输入新密码"
                              label-class="retrieval-input-label" :type="inputType"
                              placeholder="输入新密码" :icon-class="iconClass" icon-width="30px" icon-position="right"
                              @onIconClick="iconHandle"></mu-input>
                </group>
            </div>
            <div class="retrieval-btn">
                <x-button @click.native="handle">完成</x-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../store/constants.vue'
    import Vue from 'vue'
    import md5 from 'js-md5'
    import {
        lang
    } from 'muka'
    import {
        MInput,
    } from 'muka-ui'
    import {
        XButton,
        Group
    } from 'vux'

    export default {
        name: 'hello',
        components: {
            'mu-input': MInput,
            XButton,
            Group
        },
        data: function () {
            return {
                iconClass: {
                    'ion-eye': false,
                    'ion-eye-disabled': true
                },
                inputType: 'password',
                newpass: ''
            }
        },
        created: function () {

        },
        computed: mapState([
            VUEX_NAME.findPwdObj,
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.updateFindPwdObj,
            ]),
            handle: async function () {
                if (this.newpass === '') {
                    this.$vux.toast.show({
                        text: '密码不能为空',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                this.$ajax(
                    'resetPwdFour',
                    {
                        newPassword: md5(this.newpass),
                        verifySessionId: this.findPwdObj.verifySessionId
                    },
                    (content) => {
                        this.$router.push('/login')
                    }, true, true)
            },
            iconHandle: function () {
                lang.invert(this.iconClass)
                if (this.iconClass['ion-eye']) {
                    this.inputType = 'text'
                } else {
                    this.inputType = 'password'
                }
            }
        }
    }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>


</style>
